<template>
	<view class="mall-page">
		<!-- 轮播 -->
		<view class="carousel-section">
			<p>阳泉</p>
			<!-- <image src="../../static/images/dingweiIcon.png" mode="widthFix"></image> -->
			<text>{{nowTime}}</text>
			<text>{{message}}</text>
			<!-- <view class="search">
				<view class="searchLeft">
					<static src="../../static/images/search.svg" alt="">
					<input type="text" placeholder="请输入搜索内容" placeholder-style="font-size:26rpx">
				</view>
				<view class="searchRight">
					搜索
				</view>
			</view> -->
			<!-- <swiper class="carousel" circular indicator-dots indicator-color="rgba(1, 1, 1, .3)"
				indicator-active-color="#fff">
				<swiper-item v-for="(item, index) in myBannerList" :key="index" class="carousel-item"
					@click="bannerGoToDetail(item)">
					<image :src="item.ImgUrl" mode="aspectFill" />
				</swiper-item>
			</swiper> -->
		</view>

		<view class="iconMenu" :class="[
			{'maxHeight':minHeight==1},
			{'minHeight':minHeight==0},
		]">
			<swiper class="carousel" circular @change="swiperChange" indicator-active-color="#000" :autoplay="false"
				:duration="1000" :indicator-dots="myNavList.length>1?true:false">
				<swiper-item v-for="(item,index) in myNavList" :key="index">
					<view class="list">
						<view class="box" v-for="(row,index) in item" :key="index" @click="goToDetail(row)">
							<view class="img">
								<image :src="row.ImgUrl" mode="widthFix"></image>
							</view>
							<view class="iconName">{{row.Name}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
       <!-- <scroll-view scroll-x="true" class="navList">
		
			<view class="navA">
				<view class="navItem" v-for="(item,index) in myNavList" :key='index' @click="goToDetail(item)">
					<image :src="item.ImgUrl"></image>{{item.Name}}
				</view>
			</view>
			
		</scroll-view> -->
		

		<view class="areaPart">
			<view class="areaTitle">
				<view class="areaTitleLeft">
					<!-- <image src="../../static/images/shopCheck.png"></image> -->
					<p>玩 转 景 区</p>
				</view>
				<view class="areaTitleRight" @click="goNewPage()">
					查看更多
					<uni-icons type="forward" color="#999" size="18"></uni-icons>
				</view>
			</view>

			<view class="areaContent">
				<view class="areaItem" v-for="(item,index) in areaList" :key='index'>
					<image src="https://yjy.monkeysoftware.cn/serviceplatform/static/images/feature/noman.png" mode="widthFix"></image>
					<p>{{item.name}}</p>
				</view>
			</view>
		</view> 

		<view class="areaPart">
			<view class="areaTitle">
				<view class="areaTitleLeft">
					<!-- <image src="../../static/images/shopCheck.png"></image> -->
					<p>星 级 酒 店</p>
				</view>
				<view class="areaTitleRight">
					查看更多
					<uni-icons type="forward" color="#999" size="18"></uni-icons>
				</view>
			</view>

			<view class="areaContent">
				<view class="areaItem" v-for="(item,index) in areaList" :key='index'>
					<image src="https://yjy.monkeysoftware.cn/serviceplatform/static/images/feature/noman.png" mode="widthFix"></image>
					<p>{{item.name}}</p>
				</view>
			</view>
		</view> 

		<view class="imgNav">
		
		</view>

		<!-- 快捷导航 -->
		<view class="goods-section">
			<template v-for="(item,index) in goodsTypeList">
				<mall-title :title="item.Name" :ImgUrl="item.ImgUrl" @onCLick="handleMore(item)"></mall-title>
				<goods-list :list="item.Data" :showSubTitle="true" @navTo="navGoToDetail">
				</goods-list>
			</template>
		</view>
	</view>
</template>

<script>
	import getDateTime from '@/api/commData.js';
	import MallTitle from './components/mall-title.vue'
	import GoodsList from './components/goods-list.vue'
	import Config from '@/config/index.js'
	import {
		getGuideSiteList
	} from '@/api/base.js'
	import {
		getGoodsList
	} from '@/api/mall.js'
	import {
		mapState
	} from 'vuex'
	import {
		forEach,
		isURl
	} from '@/utils/tools.js'
	export default {
		name: "mallPage",
		components: {
			MallTitle,
			GoodsList,
		},
		computed: {
			...mapState({
				siteConfig: state => state.site.siteConfig
			})
		},
		data() {
			return {
				minHeight:'',
				nowTime:'',
				message:'',
				myNavList: [],
				myBannerList: [],
				areaList: [{
						name: '米花谷无人农场',
						id: 1
					},
					{
						name: '米花谷无人农场2',
						id: 2
					}
				],
				hotelList: [{
						name: '名杰酒店',
						id: 1
					},
					{
						name: '名杰酒店2',
						id: 2
					}
				],
				bannerList: [],
				navList: [],
				goodsTypeList: [],
				IconOBj: {},
				navIconList: [{
						name: '游玩预定'
					},
					{
						name: '酒店住宿'
					},
					{
						name: '餐饮美食'
					},
					{
						name: '路线游'
					},
					{
						name: '导游服务'
					},
					{
						name: '活动报名'
					}
				]
			};
		},
		onLoad() {
			this.getSite()
			this.getInfor()
			this.getBannerInfor()
			this.message = uni.getStorageSync('weather')
			var timeStr = getDateTime.dateTimeStr('y-m-d h:i:s'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.nowTime = timeStr.substr(5,5)
			
		},
		methods: {
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			goNewPage(){
				uni.navigateTo({
					url:'../newPage/newPage'
				})
			},
			async getInfor() {
				try {
					const {
						Data
					} = await getGuideSiteList({
						ParentId: Config.site.yudingNav,
						layers: 2,
					})
					if(Data.length>4){
						this.minHeight = 1
					}else{
						this.minHeight = 0
					}
					
					let newData = [];
					for (let i = 0; i < Data.length; i += 8) {
						newData.push(Data.slice(i, i + 8))
					};
					
					this.myNavList = newData

				} catch (e) {
					// console.log(e)
					//TODO handle the exception
				}
			},
			async getBannerInfor() {
				try {


					const {
						Data
					} = await getGuideSiteList({
						ParentId: Config.site.yudingBanner,
						layers: 2,
					})
					this.myBannerList = Data
					console.log('!1', Data)
				} catch (e) {
					// console.log(e)
					//TODO handle the exception
				}
			},
			// 获取站点配置信息
			async getSite() {
				try {
					const {
						Data
					} = await getGuideSiteList({
						ParentId: Config.site.res_id,
						layers: 2,
					})
					// const bannerList = Data.find(item=>item.Id === Config.site.res_banner_id)
					// const navList = Data.find(item=>item.Id === Config.site.res_nav_id)
					const IconList = Data.find(item=>item.Id === Config.site.res_Icon_id)
					
					// if (bannerList) {
					// 	this.bannerList = bannerList.Children
					// }

					// if (navList) {
					// 	this.navList = navList.Children
					// }

					if (IconList) {
						/* 
							2: '地方特产',
							3: '第三方',
							11: '景区门票',
							12: '餐饮美食',
							13: '酒店住宿',
							14: '路线游',
							15: '导游服务'
						 */
						const typeEnums = {
							1115: 11,
							1116: 13,
							1117: 12,
							1118: 14,
							1119: 15,
						}
						// const obj = {}
						Object.keys(typeEnums).forEach((key) => {
							const row = IconList.Children.find(listItem => listItem.Id * 1 === key * 1)
							if (row) {
								this.goodsTypeList.push({
									Type: typeEnums[key],
									Name: row.Name,
									ImgUrl: row.ImgUrl,
									Data: []
								})
								// this.$set(obj,typeEnums[key],row)
								this.getMallGoodsList(typeEnums[key])
							}
						})
						// this.IconOBj = obj
					}

					// 获取站点信息后再加载数据

				} catch (e) {
					// console.log(e)
					//TODO handle the exception
				}
			},
			goToDetail(item) {
				console.log('1223',item.LinkUrl)
				uni.navigateTo({
					url: item.LinkUrl
				})
			},
			//获取商品列表
			async getMallGoodsList(Type) {
				try {
					const {
						Data
					} = await getGoodsList({
						IsRecommend: 1,
						TypeId: Type,
						size: 4
					})
					const listItem = this.goodsTypeList.find(item => item.Type === Type)
					if (listItem) {
						listItem.Data = Data
					}
					// this.goodsTypeList = this.listGroup(Data)
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 跳转商品详情页
			navGoToDetail(e) {
				uni.navigateTo({
					url: `/mall_subpages/mall/goods-detail/goods-detail?id=${e.Id}&type=${e.Type}`
				})
			},
			bannerGoToDetail(item) {
				if (isURl(item.LinkUrl)) {
					window.location.href = item.LinkUrl
				} else {
					uni.navigateTo({
						url: item.LinkUrl
					})
				}
			},

			// 跳转商品搜素页
			navToSearchList(item) {
				uni.navigateTo({
					url: item.LinkUrl
				})
			},
			handleMore(item) {
				uni.navigateTo({
					url: `/mall_subpages/mall/goods-list-search/goods-list-search?type=${item.Type}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mall-page {
		position: relative;
		background-color: #e9e9e9;

		.topBg {
			width: 100%;
			height: 600rpx;
			background-image: url(https://yjy.monkeysoftware.cn/serviceplatform/static/images/feature/pinjianBg.png);
			background-size: 100% 100%;

			.search {
				display: flex;
				width: 90%;
				height: 90rpx;
				margin-left: 5%;
				padding-top: 30rpx;
				overflow: hidden;
				border-radius: 8rpx;
				color: grey;

				.searchLeft {
					width: 80%;
					background: #FFFFFF;
					opacity: 0.5;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					font-size: 26rpx;

					img {
						margin-left: 5%;
						width: 50rpx;
					}
				}

				.searchRight {
					font-size: 24rpx;
					background: #FFFFFF;
					opacity: 0.5;
					width: 15%;
					margin-left: 5%;
					color: #373737;

					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

			}

		}
		.maxHeight{
			height: 320rpx;
		}
		.minHeight{
			height: 160rpx;
		}
		.iconMenu {
			width: 100%;
			// padding-top: 30rpx;
			// padding-bottom: 30rpx;
			// height: 320rpx;
			// min-height: 160rpx;
			// max-height: 320rpx;
			background-color: #F8F8F8;
			margin: 0;
			border-radius: 10rpx;
		
			// padding: 0 30rpx;
			/deep/ .uni-swiper-dot {
				width: 20rpx;
				height: 10rpx;
				border-radius: 50rpx;
			}
			swiper /deep/ .uni-swiper-dots-horizontal {
				bottom: 30rpx;
				.uni-swiper-dot{
					
				}
				.uni-swiper-dot-active{
					background-color: #e07b2b!important;
				}
			}
			swiper {
				width: 100%;
				height: 100%;
		
				swiper-item {
					width: 100%;
					height: 100%;
		
					.list {
						display: flex;
						flex-wrap: wrap;
						// align-items: center;
						width: 100%;
						height: 100%;
		
						.box {
							width: 25vw;
							height: 72rpx;
							text-align: center;
							margin-top: 25rpx;
		
							.img {
								width: 100%;
								height: 100%;
		
								image {
									width: 10vw;
									height: 50rpx;
								}
							}
		
							.iconName {
								font-size: 28rpx;
							}
						}
					}
		
				}
			}
		
			// .title {
			// 	padding-top: 10upx;
			// 	margin: 0 0 10upx 3%;
			// 	font-size: 30upx;
			// 	height: 80upx;
			// 	display: flex;
			// 	align-items: center;
			// }
		
		}
        .navA{
			
		}
		.navList {
			white-space: nowrap;
			        width: 100%;
			// height: 450rpx;
			// display: flex;
			// flex-wrap: wrap;
			// align-items: center;
			// justify-content: center;
			// background-color: #f8f8f8;
			// margin-top: 10rpx;
 
			.navItem {
				// width: 30%;
				// height: 40%;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				// margin-left: 3%;
				// color: #111;
				//   font-size: 28rpx;
				// font-weight: bold;
            display: inline-block;
            width: 100%;
            height: 150px;
            line-height: 150px;
            text-align: center;
            font-size: 18px;
           
				image {
					width: 50%;
					height: 80rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	

		.areaPart {
			padding: 3%;

			.areaTitle {
				height: 180rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.areaTitleLeft {
					width: 70%;
					height: 100%;
					color: #717171;
					font-size: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					image {
						width: 40%;
						height: 52rpx;
						margin-bottom: 10rpx;
					}

					p {
						margin-left: 3%;
					}
				}

				.areaTitleRight {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 22rpx;
					color: gray;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}
			}

			.areaContent {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.areaItem {
					width: 44%;
					display: flex;
					flex-direction: column;

					image {
						width: 100%;
						margin-bottom: 10rpx;
					}

					p {
						color: #737373;
						font-size: 24rpx;
						font-weight: bold;
						margin-left: 3%;
					}
				}
			}
		}

	}

	/* 轮播图 */
	.mall-page /deep/ .uni-swiper-dot {
		width: 20rpx;
		height: 10rpx;
		border-radius: 50rpx;
	}

	.mall-page /deep/ .uni-swiper-dots-horizontal {
		bottom: 30rpx;
	}
     .mall-page{
		 .carousel-section{
			   width: 100%;
			   height:500rpx;
			   background-image: url(https://yjy.monkeysoftware.cn/serviceplatform/static/images/feature/bg100.png);
			   background-size: 100% 100%;
			   display: flex;
			   flex-direction: column;
			   align-items: center;
			   justify-content: center;
			   color: snow;
			   font-weight: bold;
			   font-size: 50rpx;
			   image{
				   width: 50rpx;
				  
			   }
			 .search {
			 	display: flex;
			 	width: 90%;
			 	height: 90rpx;
			 	margin-left: 5%;
			 	padding-top: 30rpx;
			 	overflow: hidden;
			 	border-radius: 8rpx;
			 	color: grey;
				position: absolute;
				z-index: 9;
			 
			 	.searchLeft {
			 		width: 80%;
			 		background: #FFFFFF;
			 		opacity: 0.5;
			 		border-radius: 40rpx;
			 		display: flex;
			 		align-items: center;
			 		font-size: 26rpx;
			 
			 		img {
			 			margin-left: 5%;
			 			width: 50rpx;
			 		}
			 	}
			 
			 	.searchRight {
			 		font-size: 24rpx;
			 		background: #FFFFFF;
			 		opacity: 0.5;
			 		width: 15%;
			 		margin-left: 5%;
			 		color: #373737;
			 
			 		border-radius: 60rpx;
			 		display: flex;
			 		align-items: center;
			 		justify-content: center;
			 	}
			 
			 }
		 }
	 }
	.carousel {
		width: 100%;
		// min-height: 160rpx;
		// max-height: 320rpx;
		background-color: #F8F8F8;
        /deep/ .uni-swiper-wrapper{
			// min-height: 160rpx;
			// max-height: 320rpx;
			.uni-swiper-slides{
				// min-height: 160rpx;
				// max-height: 320rpx;
				.uni-swiper-slide-frame{
					
					// height: 320rpx;
					.list{
						
					}
				}
			}
		}
		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: #c9c9c9;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	/* 轮播图 end */
	.nav-top-bg {
		position: absolute;
		margin-top: -18rpx;
		width: 100%;
		height: 20rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.goods-section {
		padding: 20rpx 0 20rpx 0;
		background-color: #f8f8f8;
		margin-top: 10rpx;
	}
	.goods-section :first-child{
		margin-top: 0!important;
	}
	.goods-section :last-child{
		border: none;
	}
</style>
